import React from 'react';
import { AutoComplete } from 'antd';

const { Option } = AutoComplete;
const AutoCompleteSelect = ({ dataList: sourceList, placeholder = '请输入', ...otherProps }) => {
    const [searchText, setSearchText] = React.useState('');

    return (
        <AutoComplete
            placeholder={placeholder}
            style={{ width: '100%' }}
            onSearch={val => setSearchText(val)}
            {...otherProps}
        >
            {sourceList
                ?.filter(item => {
                    if (searchText) {
                        return item.label.includes(searchText);
                    }
                    return item;
                })
                ?.map(item => (
                    <Option key={String(item.value)} value={String(item.value)}>
                        {item.label}
                    </Option>
                ))}
        </AutoComplete>
    );
};

export default AutoCompleteSelect;
